<template>
    <div class="bigbox">
        <ul v-for="item in $store.state.list" :key="item">
            <p class="top">{{ item.name }}</p>
            <li v-for="(item, index) in $store.state.data" @click="beforeCreate(index)" :key="item">
                <img :src="item.image" alt="">
                <div class="right">
                    <div class="name">{{ item.name }}</div>
                    <div class="des">{{ item.description }}</div>
                    <div class="sell">
                        <span>
                            月售{{ item.sellCount }}份
                        </span>
                        <span class="raing">
                            好评{{ item.rating }}%
                        </span>
                    </div>
                    <div class="pice">
                        <span class="sp1">
                            ￥{{ item.price }}
                        </span>
                        <del class="oldPrice" v-show="item.oldPrice">
                            ￥{{ item.oldPrice }}
                        </del>
                        <span class="boo">
                            <span class="sp3">-</span>
                            <span class="sp2">
                            {{num}} 
                        </span>
                        <span class="sp3">+</span>
                        </span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>

import { mapState } from 'vuex';
export default {
    computed: {
        ...mapState(["data"]),
        ...mapState(["num"]),
    },
    mounted() {
        this.$store.dispatch("getData");
    },
    methods: {
        beforeCreate(index) {
            console.log(this.data);
            this.$store.commit("chengS", {
                index: index
            });
        },
    }
}

</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
}

.bigbox {}

.top {
    width: 100%;
    padding-left: .9375rem;
    color: gray;
    background-color: gainsboro;
}

li {
    display: flex;
    background-color: #fff;
    padding: .925rem 0rem;
    margin: 0rem .625rem;
    border-bottom: 1px solid gainsboro;

}

img {
    width: 30%;
    height: 3.975rem;
}

.right {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.des,
.sell>span {
    font-size: .875rem;
    color: gray;

}

.pice .sp1 {
    color: red;

}
.boo{
  float: right; 
  color: gray; 
  text-align: center;
}
.pice .sp3 {
    color: #fff;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: skyblue;
}
.pice .sp2{
    margin:0 .625rem;
}

</style>